<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bo dy{
				wid th: 600px;
				height: 1000000000px;
				background-image: url(img/山水.png);
				background-size: contain;
				/* 函数  cover  等比例放大图片    特点: 原图片按照比例放大存背景空间
				        【开发者: 背景图大小是否等于背景空间】
				        contain 等比例缩小图片   特点: 图片按照比例缩小存背景空间
						【开发者: 背景图等比例显示在背景空间】
				*/
			   /* 背景附件-- 尺寸中存在cover或者contain */
			   background-attachment: fixed;  /* fixed--背景图片固定 */  /* scroll--随文字滚动，背景图片不固定  */
			}
			div{
				width: 600px;
				height: 300px;
				background-color: #e4393c;
				background: #fff000;  /* background 会取代background-background-color的颜色*/
				background-image: url(img/山水.png);
				/* 问题: 超大图-不显示   小图-显示
				   注意: 背景空间大小，如果图小于背景空间--平铺 */
				   background-repeat: no-repeat;   /* 不平铺   repeat-x,y   横向，纵向平铺 */
				   background-size: 30%;
				   /* 背景尺寸属性值: 数值px  % |  函数  cover contain  */
				   /* 背景定位: 前提背景空间大于背景图  关键字: center  left  right  top  bottom */
				   background-position: 95% 5%; 
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit soluta officia ea minus non ut, totam voluptas, rerum nihil voluptatibus expedita dolorum iusto vitae quo, quia dolorem! Adipisci, architecto vero!
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta voluptate quis quidem harum nostrum accusamus totam aspernatur, fuga impedit temporibus nam reprehenderit perferendis, velit fugit cumque ipsa corporis blanditiis ullam?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eaque rerum, ad maxime necessitatibus exercitationem est quidem asperiores neque perferendis at dolor aspernatur placeat, voluptatibus et, tempora voluptatem dolore vel.
		
		<!--html  img图片 引入一张图片，位置不可随意改变
		    css 背景图片  引入一张图片，位置可以随意改变 
			    子属性 background-color 背景颜色
			        background-image  背景图
					background-repeat  背景重复问题
					background-size    背景尺寸
					background-attachment  背景附件
					background-position  背景定位
			  复合属性 background: background-image  background-color  background-position 
			                      background-size  background-repeat和background-attachment
			  简写属性  background: 	background-image  	 background-position | 	background-size  background-repeat	  
			  替代子属性  background-image  background-color   background-repeat
			-->
			<div></div>
	</body>
</html>